@extends('WShop::layout')
@section('content')
    @include('WShop::public.header')
    <div class="mui-content mui-scroll-wrapper" id="pullrefresh">
        <div class="mui-scroll">

            <div class="mui-table-view mui-table-view-chevron  ">

                <div class="mui-zhuda mui-zhuda-fenlei">

                    <div class="mui-zhuanda-list">
                        <ul class="mui-list-unstyled mui-clearfix" id="pull-load">
                            @foreach($list as $item)
                            <li>
                                <a href="{{route('f_Wap_Goods_goodsDetail',['goods_id'=>$item->goods_id])}}" >
                                    <img src="{{str2arr($item->goods_images)[0]}}"  alt="" />
                                    <p class=" mui-ellipsis">{{$item->goods_name}}</p>
                                    <span class="mui-text-red">
                                              <b>￥</b>@if($level >0){{$item->vip_price}}@else{{$item->price}}@endif
                                              <del style="font-size: 12px;color: #a29b9b;margin-left: 5px;">￥{{$item->market_price}}</del>
                                    </span>

                                </a>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('WShop::public.foot_bar')
@endsection
@push('scripts')
    <script>

        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            slidesPerView: 4,
            paginationClickable: true,
            spaceBetween: 30
        });
        var btn=$('.mui-fenlei .swiper-slide')
        for (var i=0;i<btn.length;i++){
            btn[i].addEventListener('tap',function(){
                $(this).addClass('swiper-slide-actives').siblings().removeClass('swiper-slide-actives')
            })
        }
    </script>
    <script>
        var goodsItemTpl = '<li>' +
            '<a href="{{route('f_Wap_Goods_goodsDetail',['goods_id'=>'-100'])}}" >' +
            '<img src="{%goods_img%}" alt="" />' +
            '<p class=" mui-ellipsis">{%goods_name%}</p>' +
            '<span class="mui-text-red"><b>￥</b>{%goods_price%} <del style="font-size: 12px;color: #a29b9b;margin-left: 5px;">￥{%market_price%}</del></span>' +
            '</a></li>'

        var pageNum = 1;
        var currencyTitle = {c1:"{{get_currency()['money1']}}",
            c2:"{{get_currency()['money2']}}",
        };
        var level = "{{$level}}" ;
        mui.init({
            pullRefresh : {
                container:"#pullrefresh",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
                up : {
                    style: 'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
                    color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
                    height: '50px',//可选,默认50px.下拉刷新控件的高度,
                    range: '100px', //可选 默认100px,控件可下拉拖拽的范围
                    offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
                    contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
                    auto: false,//可选,默认false.首次加载自动上拉刷新一次
                    callback: function () {
                        pageNum = pageNum+1;
                        url = handleUrl(pageNum);
                        $.ajax({
                            type: 'get',
                            url: url,
                            dataType: 'json',
                        }).done(function (response) {

                            if(response.status){
                                data = response.data.list;
                                var len = data.length;
                                if(len<1){
                                    mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
                                    mui('#pullrefresh').pullRefresh().disablePullupToRefresh();
                                    return true;
                                }
                                for (var i=0; i<len; i++){
                                    var goodsImg = data[i]['goods_images'].split(',')
                                        .filter(function (item) {
                                            return item;
                                    });
                                   var goodsItem = goodsItemTpl;
                                    goodsItem = goodsItem.replace('-100',data[i]['goods_id'])
                                        .replace('{%goods_img%}',goodsImg.shift())
                                        .replace('{%goods_name%}',data[i]['goods_name'])
                                        .replace('{%goods_price%}',showPrice(data[i],level))
                                        .replace('{%market_price%}',data[i]['market_price']);
                                    $("#pull-load").append(goodsItem);
                                }
                            }
                            mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);

                            mui('#pullrefresh').pullRefresh().refresh(true);

                        }).fail(function (XMLHttpRequest) {
                            tooltips('网络异常,请检查连接');

                        }).always(function () {

                        });

                    }
                }
            }
        });
        
        function handleUrl(pageNum) {
            var url = window.location.href;
            if(url.indexOf("page_num=") >= 1){
                var u = url.split("page_num=");
            }else{
                if(url.indexOf("?") >= 1){
                    url = url+"&page_num="+pageNum;
                }else{
                    url = url+"?page_num="+pageNum;
                }
            }
            if(u) {
                var e = u[1].split("&");
                var d="";
                if(e.length > 1){
                    for(var i=0;i<e.length-1;i++){
                        d += "&"+e[i+1];
                    }
                }
                var url = u[0] + "page_num=" + pageNum+d;
            }

            return url
        }
        
        function showPrice(info,level) {
            switch (parseInt(level)) {
                case 0:
                    return info['price'];
                case 1:
                    return info['vip_price'];
                default:
                    return info['price'];
            }
        }
    </script>
 @endpush